<template>
  <div class="orders">
    <div class="container">
      <h1>我的订单</h1>
      <div v-if="loading">加载中...</div>
      <div v-else>
        <div v-if="orders.length === 0" class="empty">暂无订单</div>
        <ul v-else class="order-list">
          <li v-for="o in orders" :key="o.orderNo" class="order-item">
            <div class="order-main">
              <strong>订单号：</strong>{{ o.orderNo }}
              <span class="status">状态：{{ statusText(o.status) }}</span>
            </div>
            <div class="order-sub">
              <span>演出ID：{{ o.eventId }}</span>
              <span>票数：{{ o.ticketCount }}</span>
              <span>总额：¥{{ o.totalAmount }}</span>
              <span>创建时间：{{ formatDate(o.createdAt) }}</span>
            </div>
            <div class="order-actions">
              <RouterLink :to="`/order/${o.orderNo}`" class="btn btn--secondary">查看详情</RouterLink>
              <button v-if="o.status === 1" class="btn btn--secondary" @click="cancel(o.orderNo)">取消订单</button>
              <button v-if="o.status === 1" class="btn btn--primary" @click="pay(o.orderNo)">伪支付</button>
            </div>
          </li>
        </ul>
      </div>
      <RouterLink to="/" class="btn btn--secondary">返回首页</RouterLink>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { apiClient } from '@/api/client'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const orders = ref([])

function statusText(s) {
  return s === 1 ? '待支付' : s === 2 ? '已支付' : s === 3 ? '已取消' : '未知'
}

function formatDate(dt) {
  if (!dt) return ''
  const d = new Date(dt)
  return d.toLocaleString('zh-CN')
}

async function loadOrders() {
  try {
    loading.value = true
    const res = await apiClient.get('/api/orders/me')
    orders.value = Array.isArray(res?.data) ? res.data : (Array.isArray(res) ? res : [])
  } catch (err) {
    if (err?.status === 401) {
      router.push({ path: '/login', query: { redirect: '/orders' } })
    }
    console.error('加载订单失败', err)
  } finally {
    loading.value = false
  }
}

async function cancel(orderNo) {
  try {
    await apiClient.post(`/api/orders/${orderNo}/cancel`, {})
    await loadOrders()
  } catch (err) {
    alert(`取消失败：${err.message}`)
  }
}

async function pay(orderNo) {
  try {
    await apiClient.post(`/api/orders/${orderNo}/pay`, {})
    await loadOrders()
  } catch (err) {
    alert(`支付失败：${err.message}`)
  }
}

onMounted(() => {
  loadOrders()
})
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as *;

.orders {
  padding: $spacing-xl 0;
  
  .order-list {
    list-style: none;
    padding: 0;
    margin: $spacing-lg 0;
  }
  .order-item {
    background: #fff;
    border-radius: $border-radius-md;
    box-shadow: $shadow-light;
    padding: $spacing-md;
    margin-bottom: $spacing-md;
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
  }
  .order-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: $font-size-md;
  }
  .order-sub {
    display: flex;
    gap: $spacing-lg;
    color: $text-secondary;
  }
  .order-actions {
    display: flex;
    gap: $spacing-sm;
  }
}

.orders h1 {
  color: $text-primary;
  margin-bottom: $spacing-md;
}

.empty {
  color: $text-secondary;
  margin-bottom: $spacing-lg;
  text-align: center;
}
</style>